<template>
  <div class="package-model-container ">
    <div class="package-desc flex-normal">
      <i class="desc-icon el-icon-info"></i>
      <span class="desc-txt">根据套餐内容计算，无需手工输入</span>
    </div>
    <div class="model-main-container">
      <div class="model-tab-container flex-between">
        <div class="model-tab-content flex-normal">
          <div v-for="(tab, idx) in modelConfig.tabs" :key="idx" 
            :class="['tab-item flex-center', currentTab.name == tab.name && 'active']">
            <span class="tab-txt">{{tab.label}}</span>
          </div>
        </div>
        <div v-if="modelConfig.hasAction" class="mdoel-btn-content flex-center">
          <span class="btn-txt">管理服务</span>
        </div>
      </div>
      <div class="model-main-content" v-if="currentTab.name">
        <!-- <vue-scroll> -->
          <div class="item flex-between" v-for="(item) in currentTab.list" :key="item.id">
            <div class="item-image">
              <img class="image" :src="item.serveImg" >
            </div>
            <div class="item-content flex-column">
              <span class="item-label">{{item.serveName}}</span>
              <span class="item-type">{{item.serveDetails}}</span>
              <div class="item-more flex-normal">
                <span class="i-desc">市场单价：{{item.price || '0.00'}}</span>
                <span class="i-desc">核销价：{{item.writeOffFee || '0.00'}}</span>
              </div>
            </div>
            <div :class="['item-action flex-normal', item.isChecked && 'active']"
            @click="actionItem(item)">
              <span class="action-icon car-common-icon">&#xe663;</span>
              <span class="action-txt">选择</span>
            </div>
          </div>
        <!-- </vue-scroll> -->
      </div>
      <div class="model-selected-content flex-column">
        <span class="select-label">已选服务</span>
        <div class="select-content">
          <el-table :data="tableData" height="300"
            style="width: 100%;">
            <el-table-column prop="serveName" label="服务名称"></el-table-column>
            <el-table-column prop="serveDetails" label="服务内容"></el-table-column>
            <el-table-column prop="inventoryNum" label="数量">
              <template slot-scope="{row}">
                <!-- <div :contenteditable="true" @blur="rowNumChange($event, row)">
                  {{ row.inventoryNum || '0' }}
                </div> -->
                <div>{{ row.inventoryNum || '0' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="writeOffFee" label="核销价"></el-table-column>
            <el-table-column prop="total" label="总计"></el-table-column>
          </el-table>
          <div class="sums-content flex-column">
            <div class="sums-item flex-normal">
              <span class="sums-label desc">市场单价</span>
              <span class="sums-val">{{sumsObj.marketPrice}}</span>
            </div>
            <div class="sums-item flex-normal">
              <span class="sums-label">优惠</span>
              <span class="sums-val error">{{sumsObj.preferentialPrice}}</span>
            </div>
            <div class="sums-item flex-normal">
              <span class="sums-label">核销价</span>
              <span class="sums-val">{{sumsObj.writeOffPrice}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// serveTypeIds
export default {
  name: 'packageModel',
  props: {
    params: Object,
    value: {
      type: String,
      default: '',
    },
    config: {
      type: Object,
      default: {
        tabs: [
          {label: '官方服务', val: 'gffw'},
          {label: '自建服务', val: 'zjfw'},
        ],
        hasAction: false
      }
    },
  },
  watch: {
    value: {
      handler: function (str) {
        let {tabs} = this.config, list = []
        this.tableData = []
        if(!str || str == '') return
        tabs.forEach(tab => {
          list = [...list, ...tab.list]
        })
        let arr = str.split(',')
        list.forEach(item => {
          let boo = arr.includes(`${item.id}`)
          this.$set(item, 'isChecked', boo)
          if(boo){
            this.tableData.push(item)
          }
        })
      },
      immediate: true
    },
    tableData: {
      handler: function (list) {
        list.forEach(item => {
          this.$set(item, 'total', this.computedRowTotal(item))
          this.$set(item, 'scTotal', this.computedRowScTotal(item))
        })
        this.computedSums(list)
      },
      deep: true
    }
  },
  data() {
    return {
      currentTab: {},
      checkedArr: [], //选中套餐
      modelConfig: this.config,
      sumsObj: {
        marketPrice: '0.00',
        preferentialPrice: '0.00',
        writeOffPrice: '0.00'
      },
      tableData: []
    }
  },
  mounted(){
    let _self = this
    _self.sumsObj = _self.params
    _self.currentTab = _self.modelConfig.tabs[0]
    // _self.currentTab.list.forEach(i => {
    //   _self.$set(i, 'isChecked', false)
    // })
  },
  methods: {
    computedRowTotal(row){
      let total = parseFloat(row.writeOffFee)
      return total.toFixed(2)
    },
    computedRowScTotal(row){
      let total = parseFloat(row.price)
      return total.toFixed(2)
    },
    computedSums(list){
      let _self = this, obj = {marketPrice: '0.00', preferentialPrice: '0.00', writeOffPrice: '0.00'}
      list.forEach(item => {
        obj.writeOffPrice = parseFloat(obj.writeOffPrice) + parseFloat(item.total)
        obj.marketPrice = parseFloat(obj.marketPrice) + parseFloat(item.scTotal)
      })
      obj.preferentialPrice = parseFloat(obj.marketPrice) - parseFloat(obj.writeOffPrice)
      _self.sumsObj = {..._self.sumsObj, ...obj}
      _self.$emit('change', obj)
    },
    validateNum(value){
      let reg = /^\d+$/
      if (!reg.test(value) || value == '0') return false
      return true
    },
    actionItem(item){
      let _self = this, list = [], {tabs} = this.config
      _self.$set(item, 'isChecked', !item.isChecked)
      tabs.forEach(tab => {
        list = [...list, ...tab.list]
      })
      let arr = list.filter(i => i.isChecked).map(i => i.id)
      _self.$emit('input', arr.join(','))
      // _self.computedSums(list.filter(i => i.isChecked))
    },
    rowNumChange(e, row){
      let _self = this
      let {innerText} = e.target
      let boo = _self.validateNum(innerText)
      if(!boo) {
        _self.sumsObj = {
          scj: '--', yhj: '--', hxj: '--'
        }
        return _self.$message.error('请输入大于0的整数')
      }
      _self.$set(row, 'inventoryNum', innerText)
    }
  }
}
</script>

<style lang="scss" scoped>
.package-model-container{
  user-select: none;
  .i-desc{
    margin-right: vw(8);
    &:last-child{
      margin-right: 0;
    }
  }
  .package-desc{
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
  .model-main-container{
    margin-top: vh(20);
    .model-tab-container{
      .mdoel-btn-content{
        width: vw(90);
        height: vh(36);
        background: rgba(26, 148, 255, 0.08);
        cursor: pointer;
        .btn-txt{
          color: #0003AA;
        }
      }
      .tab-item{
        width: vw(110);
        height: vh(36);
        background-color: transparent;
        cursor: pointer;
        transition: .2s;
        &.active{
          background-color: rgba(26, 148, 255, 0.08);
          .tab-txt{
            color: #0003AA;
          }
        }
        .tab-txt{
          font-size: 13px;
        }
      }
    }
    .model-main-content{
      margin-top: vh(8);
      border: 1px solid #DDDDDD;
      padding: 0 0 vw(25) vw(25);
      height: vh(300);
      overflow-y: scroll;
      .item{
        margin-top: vh(10);
        padding: 0 vw(42) vh(15) 0;
        .item-image{
          width: vw(80);
          height: vh(60);
          margin-right: vw(25);
          border-radius: vh(6);
          overflow: hidden;
          background-color: rgba(26, 148, 255, 0.08);
          .image{
            display: block;
            height: 100%;
            width: 100%;
          }
        }
        .item-content{
          flex: 1;
          line-height: 1.8;
          .item-label{
            color: #3E3E3E;
            font-size: 13px;
          }
          .item-type, .item-more{
            color: #666666;
            font-size: vh(12);
          }
        }
        .item-action{
          cursor: pointer;
          transition: .2s;
          &.active{
            .action-txt, .action-icon{
              color: #0003AA;
            }
          }
          .action-icon{
            color: #666666;
          }
          .action-txt{
            color: #3E3E3E;
            font-size: 13px;
            margin-left: vw(10);
          }
        }
      }
    }
  }
  .model-selected-content{
    margin-top: vh(20);
    .select-label{
      color: #0003AA;
      font-size: 13px;
    }
    .select-content ::v-deep{
      min-height: vh(330);
      border: 1px solid #DDDDDD;
      .el-table .el-table__header-wrapper th{
        font-size: 13px;
        color: #666;
        font-weight: normal;
      }
      .el-table{
        font-size: 13px;
        color: #3E3E3E;
      }
      .sums-content{
        align-items: flex-end;
        padding: vh(25) vw(40);
        .sums-item{
          margin-top: vh(10);
          &:first-child{
            margin-top: 0;
          }
          .sums-label{
            font-size: vh(12);
            color: #3E3E3E;
            width: vw(100);
            text-align: right;
            margin-right: vw(40);
            &.desc{
              color: #666666;
            }
          }
          .sums-val{
            font-size: vh(12);
            color: #3E3E3E;
            width: vw(100);
            &.error{
              color: #E2231A;
            }
          }
        }
      }
    }
  }
}
</style>
